<template>
  <div class="container">
    <div class="center-count-c">
      <div class="count-icon1">
        <img src="../../assets/img/centerTopIcon1.svg" style="margin-top: 27px;"/>
      </div>
      <div class="count-content">
        <div class="count-content-title">{{deviceStatus.nameOne}}</div>
        <div class="count-content-count">{{deviceStatus.valueOne}}</div>
      </div>
    </div>
    <div class="center-count-c">
      <div class="count-icon2">
        <img src="../../assets/img/centerTopIcon2.svg" style="margin-top: 27px;margin-left: 3px;"/>
      </div>
      <div class="count-content">
        <div class="count-content-title">{{deviceStatus.nameTwo}}</div>
        <div class="count-content-count">{{deviceStatus.valueTwo}}</div>
      </div>
    </div>
    <div class="center-count-c">
      <div class="count-icon3">
        <img src="../../assets/img/centerTopIcon3.svg" style="margin-top: 27px;margin-right: 8px;"/>
      </div>
      <div class="count-content">
        <div class="count-content-title">{{deviceStatus.nameThree}}</div>
        <div class="count-content-count">{{deviceStatus.valueThree}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        deviceStatus: {
          nameOne: '0',
          valueOne: '0',
          nameTwo: '0',
          valueTwo: '0',
          nameThree: '0',
          valueThree: '0'
        },
        drawTiming: null
      }
    },
    components: {},
    props: {
      configCode: {
        type: String,
        default: ''
      },
      index: {
        type: Number,
        default: 0
      }
    },
    created() {

    },
    mounted() {
      this.drawTimingFn()
    },
    beforeDestroy() {
      clearInterval(this.drawTiming);
      this.drawTiming = null
    },
    methods: {
      drawTimingFn () {
        this.queryDevice();
        this.drawTiming = setInterval(() => {
          this.queryDevice();
        }, 15000);
      },
      queryDevice() {
        this.$http.get("/visShow/queryData", {
          params: {
            configCode: this.configCode,
            index: this.index
          }
        }).then(res => {
          const {data} = res
          console.log(data, '中间头')
          if (data.status == 200) {
            this.deviceStatus = data.object
          }
        }).catch(err => {
          console.log(err)
        })
      },
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    /*padding: 10px;*/
    .center-count-c {
      display: flex;
      justify-content: space-around;
      height: 100%;
      width: 30%;

      .count-icon1 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 145px;
        width: 145px;
        background-image: url("../../assets/img/centerTopBg1.png");
        background-size: cover;
        background-position: center center;
      }

      .count-icon2 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 145px;
        width: 145px;
        background-image: url("../../assets/img/centerTopBg2.png");
        background-size: cover;
        background-position: center center;
      }

      .count-icon3 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 145px;
        width: 145px;
        background-image: url("../../assets/img/centerTopBg3.png");
        background-size: cover;
        background-position: center center;
      }

      .count-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 145px;
        width: calc(100% - 145px);
        margin-left: -20px;

        .count-content-title {
          height: 24px;
          line-height: 19px;
          color: #ffffff;
          font-size: 16px;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          font-weight: 400;
          text-align: center;
        }

        .count-content-count {
          height: 51px;
          font-size: 42px;
          font-family: Impact, Impact-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 49px;
        }
      }
    }
  }
</style>

